<template>
  <div id="app">
    <div class="header">
      <div class="h_con">
        <div class="con_left">
          <span>你好，{{userCode}}</span>
         <span @click="logout">退出</span>  
        </div>

        <div class="con_right">
          <router-link :to="{ path: '/login' }"
            ><span class="login">登录</span></router-link
          >       
         
          <router-link :to="{ path: '/car' }">
            <span class="buycar">
              <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>             
              <span>购物车</span></span></router-link>
            
          
          <router-link
            :to="{ path: '/personal', query: { userCode: userCode } }"
            ><span class="personal"><span>个人中心</span></span></router-link
          >
        </div>
      </div>
    </div>
    <div class="logo">
      <div class="logo_con">
        <a class="logo_left" href="">
          <img src="./assets/images/logo.png" alt="" />
        </a>
        <div class="logo_right">
          <div class="right_wrap">
            <input type="text" placeholder="请输入商品/店铺" />
            <button class="btn_search">搜 索</button>
          </div>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userCode:"",
    };
  },
  methods: {
    logout() {
      this.axios.get("http://localhost:8081/user/logout").then((result) => {
        if (result.data.responseCode == 200) {
          alert(result.data.responseMessage);
          sessionStorage.clear(); //清空sessionStorage存储的数据
          this.userCode=""
          this.$router.push("/login");
        }
      });
    },
  },
  created() {
    this.userCode = JSON.parse(sessionStorage.getItem("userCode"));   
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#app .header {
  height: 30px;
  border-bottom: 1px solid #e5e5e5;
  background: #f2f2f2;
  width: 100%;
}

#app .header .h_con {
  width: 65%;
  margin: auto;
  height: 100%;
  overflow: hidden;
  color: #999;
}

#app .header .con_left {
  float: left;
  line-height: 30px;
}
#app .header .con_left span {
  display: inline-block;
  margin-right: 15px;
}
#app .header .con_right {
  float: right;
  line-height: 30px;
}

#app .header .con_right a,
#app .header .con_right > span {
  display: inline-block;
  margin-left: 15px;
  line-height: 30px;
  color: #999;
}
#app .header .con_right .buycar i {
  display: inline-block;
  font-size: 16px;
  margin-right: 3px;
}

#app .logo {
  height: 100px;
  width: 100%;
  background: #fff;
  border-bottom: 2px solid #95bf47;
}
#app .logo .logo_con {
  width: 65%;
  height: 100%;
  margin: auto;
}

#app .logo .logo_con .logo_left {
  float: left;
  height: 100%;
}
#app .logo .logo_con .logo_left img {
  height: 70px;
  display: block;
  margin-top: 15px;
  overflow: hidden;
}
#app .logo .logo_con .logo_right {
  float: right;
  line-height: 100px;
}
#app .logo .logo_con .logo_right .right_wrap {
  display: inline-block;
}

#app .logo .logo_con .logo_right .right_wrap input {
  line-height: 30px;
  border: 2px solid #95bf47;
  outline: none;
  text-indent: 10px;
}
#app .logo .logo_con .logo_right .right_wrap .btn_search {
  height: 34px;
  border: none;
  display: inline-block;
  padding: 0 10px;
  background: #95bf47;
  color: #fff;
  font-weight: 600;
}
</style>
